<template>
  <div class="container">
    <h2>求和结果： {{ sum }},放大10倍后： {{ bigSum }}</h2>
    <h2>欢迎来到： {{ school }}</h2>
    <h2>欢迎来到： {{ upperSchool }}</h2>
    <!-- school -->

    <select v-model.number="n">
      <option value="1">1</option>
      <option value="1">2</option>
      <option value="1">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="sub">减</button>
  </div>
</template>

<script lang="ts" setup name="count">
import { ref, toRefs } from 'vue'
import { useCountStore } from '@/store/count'
import { storeToRefs } from 'pinia'

const countStore = useCountStore()
console.log(toRefs(countStore.$state), storeToRefs(countStore))
const { sum, school, upperSchool, bigSum } = storeToRefs(countStore)

// countStore.$subscribe((mutate, state) => {
//   console.log('countstore里保存的数据发生了变化')
// })

let n = ref(1)
function add() {
  // 第一种修改方式
  // countStore.sum += n.value
  // 第二种修改方式
  // countStore.$patch({
  //   sum: 88,
  //   school: '产业科技园'
  // })
  // 第三种修改方式
  countStore.increament(n.value)
}
function sub() {
  countStore.sum -= n.value
}
</script>

<style lang="scss" scoped>
h2 {
  margin-bottom: 20px;
}

select,
button {
  min-width: 40px;
  height: 30px;
  padding: 0 10px;
  margin: 0 5px;
}

.container {
  box-shadow: 0 0 5px #efefef;
  border: 1px solid #efefef;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
}
</style>
